[제이쿼리] 태그 및 요소 삭제, remove()

제이쿼리에서 html의 특정요소, 노드를 삭제하려면 어떻게 해야할까요? 이때 제이쿼리는 remove() 메소드를 사용할 수 있습니다. remove() 메소드는 선택된 요소를 간편하게 제거하여줍니다. 어떻게 하는지 아래에서 알아봅니다.

# jQuery의 remove()를 사용하여 엘리먼트 제거하기

참고로 empty() 또는 detach() 메소드 역시 제거하는 메소드로 비슷하나 동일한 것은 아닙니다. 우선 remove()는 다음과 같이 수행합니다.

• 1. 선택된 자신 및 자식 요소들 모두 삭제함
• 2. 연결된 모든 이벤트 역시 삭제함

위와같이 자신을 포함한 모든 자식 요소들이 삭제되는 것이 특징입니다. 뿐만 아니라 엘리먼트가 가지고 있는 데이터 및 이벤트들도 함께 삭제되는 것이 또 다른 특징입니다. 만약 이를 원치 않을 경우 detach() 메소드를 사용하는게 좋겠죠. 그럼 아래의 예제를 참고하세요.

# jQuery remove() 예제보기

간단한 예제를 알아봅니다. 아래의 예제는 remove() 메소드를 사용하여 자기 자신 및 자식 요소를 제거하는 예제입니다. 그럼 아래의 코드를 봐주세요.

이제 remove()를 사용하여 요소를 제거해도록 하겠습니다. 스크립트에 아래 코드를 추가합니다. p 태그의 모든 요소인 자식 요소까지 삭제할 경우 아래와 같이 수행합니다.

위 코드를 수행하면 아래와 같이 빈 div 태그만 남게 됩니다. 즉 선택한 p태그는 물론 함께 있던 자식 태그들 span 모두 함께 제거되었습니다.

그렇다면 이벤트도 함께 제거되는지 예제를 통하여 알아보겠습니다. 

# remove() 메소드 이벤트 제거 예제

위의 예제를 통해 자신 및 자식 요소도 함께 제거가 된다는 것을 확인하였습니다. 그렇다면 이벤트의 경우 함께 제거되는지도 확인해봐야하겠죠... 만약 아래와 같은 버튼 이벤트가 존재한다고 가정하고 실행해보겠습니다.

이제 클릭 후 동작하는 간단한 이벤트를 추가합니다. 그래야 remove() 가 정상 동작해서 이벤트를 제거하는지 알 수 있겠죠.

그럼 버튼 태그를 제거하여 이벤트의 동작을 확인해봐야하겠죠. 스크립트 코드입니다.

이제 위 코드를 실행하면 remove()가 동작하여 버튼 엘리먼트에 있던 클릭이벤트가 함께 제거될 것입니다. 즉 순서대로 보자면...

• 
  1. 버튼의 이벤트를 우선 제거
• 2. 해당하는 버튼 요소를 제거

만약 위와 같이 이벤트를 제거하지 않고 요소만 제거한다면 어떤 문제가 발생할까요? 엘리먼트는 남아도 이벤트가 남아 성능 및 메모리에 누수(Leak)가 발생할 것입니다.